import { View, Text, StyleSheet, Platform } from "react-native"
import { theme } from "../../constants/theme"

interface WordEtymologyProps {
    etymology?: {
        parts: Array<{
            text: string
            meaning: string
        }>
        explanation: string
    }
    fontSize?: number
}

export function WordEtymology({ etymology, fontSize = 11 }: WordEtymologyProps) {
    if (!etymology) return null

    // Create dynamic styles based on the fontSize prop
    const dynamicStyles = {
        partText: {
            fontSize: fontSize,
            fontWeight: theme.fontWeight.semiBold,
            color: theme.colors.neutral.black,
            marginBottom: 2,
        },
        partMeaning: {
            fontSize: fontSize - 2,
            color: theme.colors.neutral.darkGray,
        },
        explanation: {
            fontSize: fontSize,
            color: theme.colors.neutral.darkGray,
            lineHeight: fontSize * 1.4,
            textAlign: "center",
            paddingHorizontal: theme.spacing.md,
        },
    }

    return (
        <View style={styles.container}>
            <View style={styles.practicalContainer}>
                <View style={styles.header}>
                    <View style={styles.titleContainer}>
                        <View style={styles.titleDecoration} />
                        <Text style={styles.title}>词根助记</Text>
                    </View>
                </View>

                <View style={styles.partsContainer}>
                    {etymology.parts.map((part, index) => (
                        <View key={index} style={styles.partGroup}>
                            {index > 0 && (
                                <View style={styles.operatorContainer}>
                                    <Text style={styles.operator}>+</Text>
                                </View>
                            )}
                            <View style={styles.partCard}>
                                <Text style={dynamicStyles.partText}>{part.text}</Text>
                                <Text style={dynamicStyles.partMeaning}>{part.meaning}</Text>
                            </View>
                        </View>
                    ))}
                    <View style={styles.operatorContainer}>
                        <Text style={styles.operator}>=</Text>
                    </View>
                    <View style={styles.partCard}>
                        <Text style={dynamicStyles.partText}>{etymology.parts.map((p) => p.text).join("")}</Text>
                        <Text style={dynamicStyles.partMeaning}>{etymology.parts[etymology.parts.length - 1].meaning}</Text>
                    </View>
                </View>
                <Text style={dynamicStyles.explanation}>{etymology.explanation}</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        marginVertical: theme.spacing.lg,
    },
    practicalContainer: {
        backgroundColor: "rgba(240, 245, 255, 0.5)",
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        borderWidth: 1,
        borderColor: "rgba(91, 142, 244, 0.1)",
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.lg,
    },
    titleContainer: {
        flexDirection: "row",
        alignItems: "center",
    },
    titleDecoration: {
        width: 3,
        height: 16,
        backgroundColor: theme.colors.primary.default,
        marginRight: theme.spacing.sm,
        borderRadius: 1.5,
    },
    title: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
    },
    partsContainer: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        flexWrap: "wrap",
        marginBottom: theme.spacing.md,
        width: "100%",
    },
    partGroup: {
        flexDirection: "row",
        alignItems: "center",
    },
    operatorContainer: {
        paddingHorizontal: 4,
    },
    operator: {
        fontSize: 12,
        color: theme.colors.neutral.gray,
        fontWeight: theme.fontWeight.medium,
    },
    partCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.small,
        padding: 6,
        minWidth: 50,
        alignItems: "center",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 1 },
                shadowOpacity: 0.2,
                shadowRadius: 2,
            },
            android: {
                elevation: 1,
            },
        }),
    },
})

